﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true" CodeBehind="Animation.aspx.cs" Inherits="ControlExplorer.C1LineChart.Animation" %>
<%@ Register Assembly="C1.Web.Wijmo.Controls.3" namespace="C1.Web.Wijmo.Controls.C1Chart" tagPrefix="wijmo" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
		<script language = "javascript" type ="text/javascript">
		function hintContent() {
			return this.data.lineSeries.label + '\n' +
			this.x + '\n' + this.y + '';
		}

		function changeProperties() {
			var animation = {},
				seriesTransition = {},
				enabled = $("#chkEnabled").is(":checked"),
				direction = $("#selDirection").val(),
				duration = $("#inpDuration").val(),
				easing = $("#selEasing").val(),
				stEnabled = $("#chkSTEnabled").is(":checked"),
				stDuration = $("#inpSTDuration").val(),
				stEasing = $("#selSTEasing").val();
			animation.enabled = enabled;
			animation.direction = direction;
			if (duration && duration.length) {
				animation.duration = parseFloat(duration);
			}
			animation.easing = easing;

			seriesTransition.enabled = stEnabled;
			if (stDuration && stDuration.length) {
				seriesTransition.duration = parseFloat(stDuration);
			}
			seriesTransition.easing = stEasing;
			$("#<%= C1LineChart1.ClientID %>").c1linechart("option", "animation", animation);
			$("#<%= C1LineChart1.ClientID %>").c1linechart("option", "seriesTransition", seriesTransition);
		}

		function reload() {
			$("#<%= C1LineChart1.ClientID %>").c1linechart("option", "seriesList", [createRandomSeriesList("2010")]);
		}

		function createRandomSeriesList(label) {
			var data = [],
				randomDataValuesCount = 12,
				labels = ["一月", "二月", "三月", "四月", "五月", "六月",
					"七月", "八月", "九月", "十月", "十一月", "十二月"],
				idx;
			for (idx = 0; idx < randomDataValuesCount; idx++) {
				data.push(createRandomValue());
			}
			return {
				label: "Steam",
				legendEntry: true,
				fitType: "spline",
				markers: {
					visible: true,
					type: "circle"
				},
				data: { x: labels, y: data }
			};
		}

		function createRandomValue() {
			return Math.round(Math.random() * 100);
		}
		</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
	<input type="button" value="重载" onclick="reload()" />
	<wijmo:C1LineChart runat = "server" ID="C1LineChart1" BackColor = "#242529" ShowChartLabels = "false" Height="475" Width = "756">
		<Animation Direction = "Vertical"/>
		<Footer Compass="South" Visible="False"></Footer>
		<Legend Visible="false">
		</Legend>
		<Hint OffsetY="-10">
			<Content Function="hintContent" />
			<ContentStyle FontSize="10pt" />
		</Hint>
		<SeriesList>
			<wijmo:LineChartSeries Label="Steam" LegendEntry="true" FitType="Spline">
				<Markers Visible="true" Type="Circle"></Markers>
				<Data>
					<X>
						<Values>
							<wijmo:ChartXData StringValue="一月" />
							<wijmo:ChartXData StringValue="二月" />
							<wijmo:ChartXData StringValue="三月" />
							<wijmo:ChartXData StringValue="四月" />
							<wijmo:ChartXData StringValue="五月" />
							<wijmo:ChartXData StringValue="六月" />
							<wijmo:ChartXData StringValue="七月" />
							<wijmo:ChartXData StringValue="八月" />
							<wijmo:ChartXData StringValue="九月" />
							<wijmo:ChartXData StringValue="十月" />
							<wijmo:ChartXData StringValue="十一月" />
							<wijmo:ChartXData StringValue="十二月" />
						</Values>
					</X>
					<Y>
						<Values>
							<wijmo:ChartYData DoubleValue="81" />
							<wijmo:ChartYData DoubleValue="95" />
							<wijmo:ChartYData DoubleValue="21" />
							<wijmo:ChartYData DoubleValue="88" />
							<wijmo:ChartYData DoubleValue="12" />
							<wijmo:ChartYData DoubleValue="23" />
							<wijmo:ChartYData DoubleValue="62" />
							<wijmo:ChartYData DoubleValue="79" />
							<wijmo:ChartYData DoubleValue="90" />
							<wijmo:ChartYData DoubleValue="62" />
							<wijmo:ChartYData DoubleValue="69" />
							<wijmo:ChartYData DoubleValue="46" />
						</Values>
					</Y>
				</Data>
			</wijmo:LineChartSeries>
		</SeriesList>
		<SeriesStyles>
			<wijmo:ChartStyle Stroke="#ff9900" StrokeWidth="3" />
		</SeriesStyles>
		<SeriesHoverStyles>
			<wijmo:ChartStyle StrokeWidth = "4"></wijmo:ChartStyle>
		</SeriesHoverStyles>
		<Axis>
			<X Text = "月份">
				<Labels>
					<AxisLabelStyle FontSize="11pt" Rotation="-45">
						<Fill Color="#7f7f7f"></Fill>
					</AxisLabelStyle>
				</Labels>
				<TickMajor Position="Outside">
					<TickStyle Stroke="#7f7f7f" />
				</TickMajor>
			</X>
			<Y Text = "点击次数" AutoMax = "false" AutoMin = "false" Max = "100" Min = "0">
				<Labels TextAlign="Center">
					<AxisLabelStyle FontSize="11pt">
						<Fill Color="#7f7f7f"></Fill>
					</AxisLabelStyle>
				</Labels>
				<GridMajor Visible="True">
					<GridStyle Stroke="#353539" StrokeDashArray="- " />
				</GridMajor>
				<TickMajor Position="Outside">
					<TickStyle Stroke="#7f7f7f" />
				</TickMajor>
				<TickMinor Position="Outside">
					<TickStyle Stroke="#7f7f7f" />
				</TickMinor>
			</Y>
		</Axis>
	</wijmo:C1LineChart>	
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" Runat="Server">
	<p> <strong>C1LineChart</strong>可以在下载数据时展现列值变换的动画效果。</p><br/>
	<p> <strong>Animation</strong>和<strong>SeriesTransition</strong>属性用来控制下载数据和重新下载数据时的动画效果。</p>
	<ul>
		<li><strong>Animation.Direction</strong> - 动画显示的方向</li>
		<li><strong>Animation.Enabled</strong>和<strong>SeriesTransition.Enabled</strong>  - 是否需要动画</li>
		<li><strong>Animation.Duration</strong>和<strong>SeriesTransition.Duration</strong>- 指定动画时间 </li> 
		<li><strong>Animation.Easing</strong>和<strong>SeriesTransition.Easing</strong> - 设置动画类型</li>
	</ul>
	<p> <strong>Easing</strong> 属性有以下值：</p>
	<ul>
		<li>easeInCubic(">")</li>
		<li>easeOutCubic("<")</li>
		<li>easeInOutCubic("<>")</li>
		<li>easeInBack("backIn")</li>
		<li>easeOutBack("backOut")</li>
		<li>easeOutElastic("elastic")</li>
		<li>easeOutBounce("bounce")</li>
	</ul>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" Runat="Server">
	<div>
		<label for="chkEnabled">
			动画设置：启用
		</label>
		<input id="chkEnabled" type="checkbox" checked="checked" />
		<label for="selDirection">
			方向
		</label>
		<select id="selDirection">
			<option value="horizontal">水平</option>
			<option value="vertical">垂直</option>
		</select>
		<label for="inpDuration">
			时间
		</label>
		<input id="inpDuration" type="text" value="1000" />
		<label for="selEasing">
			缓和
		</label>
		<select id="selEasing">
			<option value=">">></option>
			<option value="<"><</option>
			<option value="<>"><></option>
			<option value="backIn">backIn</option>
			<option value="backOut">backOut</option>
			<option value="bounce">bounce</option>
			<option value="elastic">elastic</option>
		</select><br/>
		<label for="chkSTEnabled">
			列值变换设置：启用
		</label>
		<input id="chkSTEnabled" type="checkbox" checked="checked" />
		<label for="inpSTDuration">
			时间
		</label>
		<input id="inpSTDuration" type="text" value="1000" />
		<label for="selSTEasing">
			缓和
		</label>
		<select id="selSTEasing">
			<option value=">">></option>
			<option value="<"><</option>
			<option value="<>"><></option>
			<option value="backIn">backIn</option>
			<option value="backOut">backOut</option>
			<option value="bounce">bounce</option>
			<option value="elastic">elastic</option>
			<option value="easeInCubic">easeInCubic</option>
			<option value="easeOutCubic">easeOutCubic</option>
			<option value="easeInBack">easeInBack</option>
			<option value="easeOutBack">easeOutBack</option>
			<option value="easeOutElastic">easeOutElastic</option>
			<option value="easeOutBounce">easeOutBounce</option>
		</select>
		<input type="button" value="应用" onclick="changeProperties()" />
	</div>
</asp:Content>
